<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="toSend">传值</button>
    <!--  -->
      <input type="text" ref="input" value="abc">
      <hr>
      <h1>state值：{{$store.state.count}}</h1>
      <h1>getters值：{{$store.getters.countDouble}}</h1>
      <button @click="toMu">触发mutations的方法</button>
      <button @click="toAct">触发actions的方法</button>
      <hr>
       <slot name="myfooter"></slot>
      <hr> 
       <hr>
       <slot name="mymenu"></slot>
      <hr> 
  </div>
</template>

<script setup lang="ts">
import {ref,defineEmits,onMounted,
  useAttrs,useSlots
} from 'vue'
import {useRouter,useRoute} from 'vue-router'
// vue3使用vuex的方法 useStore
import {useStore} from 'vuex'

  let store=useStore(); //获取vuex的操作对象
    let money=ref<number>(1999)
    let myname=ref<string>("小王")
    // 无ts写法
    // let emit=defineEmits(["sendMoney","sendDir"])
    //defineEmits的 ts写法
    let emit=defineEmits<{
         (e:'sendMoney',money:number,myname:string):void
         (e:'sendDir',dir:string):void
    }>()
    let toSend=()=>{
        emit('sendMoney',money.value,myname.value)
    }
  // 非空判断
   const input = ref< HTMLElement | null >(null)

    onMounted(()=>{
      // 只能访问
      console.log(input.value?.value);
       
      console.log(input.value!.value)
       // 非空断言 ！
      //  ！确定前者不为null
      input.value!.value = '123'
    })
    //使用vuex
    console.log(store.state.count)
    let toMu=()=>{
      // 触发vuex mutations的方法
      store.commit("changeCount" ,5)
    }
    let toAct=()=>{
      // 触发mutations的方法
      store.dispatch("countAct",10 )
    }
  //vue3的 useAttrs 获取除props外的 父传子的所有属性的数据
      let attrs=useAttrs();
      console.log(attrs,'_-------------')
  // vue3 useSlots 方法  获取插槽内容
     let slots=useSlots();
    console.log(slots,"************")
</script> 
